<script setup>

import {useRouter} from "vue-router";

let router = useRouter();

function addGoodsRoute() {
  // 判断是否存在 goods 路由，通过路由的名称作为参数来进行判断
  if (router.hasRoute('goods')) {
    console.log("存在 goods 路由");
  } else {
    // 加载路由 Goods 组件
    const Goods = ()=> import("../components/Goods.vue")
    router.addRoute(
        {
          name:"goods",
          path:"/media/:id",
          component:Goods
        }
    )
  }
}

function removeGoodsRoute() {
  if (router.hasRoute('goods')) {
    router.removeRoute('goods')
  }
}
</script>

<template>
  <div>
    <button v-on:click="addGoodsRoute">添加商品路由</button>
    <button v-on:click="removeGoodsRoute">删除删除路由</button>
  </div>

  <div>
    <router-link to="/media/1">商品1</router-link>
    &nbsp;
    <router-link to="/media/2">商品2</router-link>
  </div>

  <hr>

  <router-view></router-view>
</template>

<style scoped>

</style>